<template>
  <div>
    <MyItem v-for="(item) in todolist" :key="item.id" :item="item" @deleteOne="deleteOneOf" @changeOne="changeOneOf"></MyItem>
  </div>
</template>

<script>
import MyItem from './MyItem.vue'
import {eventBus} from '../eventbus'
export default {
    name:'MyList',
    components:{MyItem},
    data(){
        return {
            todolist:[
                {id:'001',todo:'吃饭',isCheck: false},
                {id:'002',todo:'喝酒',isCheck: true},
                {id:'003',todo:'染发',isCheck: true},
            ]
        }
    },
    created(){
        // 添加事件监听
        eventBus.$on('add',(param)=>{
            let addtodo = param.todos;
            this.todolist.unshift(addtodo);
        })
        eventBus.$on('selectAll',(isCheck) => {
            this.todolist.forEach(e => e.isCheck = isCheck)
        })
    },
    mounted(){
        // 发送消息
        eventBus.$emit('sendFooter',this.todolist)
    },
    updated(){
        // 发送消息
        eventBus.$emit('sendFooter',this.todolist)
    },
    methods:{
        // 监听删除
        deleteOneOf(id){
            this.todolist = this.todolist.filter(e => e.id != id)
        },
        // 监听改变
        changeOneOf(){
            // 发送消息
            eventBus.$emit('sendFooter',this.todolist)
        }
    }
}
</script>

<style>

</style>